<template>
  <div class="m-content">
    <indexheader></indexheader>
    <div class="innercontent f-clear">
      <div class="left-content">
        <div class="commonbox hosname">
          <div class="hoslogo"><img src="../../assets/images/common/logobig.png"></div>
          <div class="namebox">
            <p class="cname">青海省第五人民医院</p>
            <p class="ename">The fIfth people's hospItal of qInghaI province</p>
          </div>
          <div class="namebox">
            <p class="cname">青海省肿瘤医院</p>
            <p class="ename">qInghaI province cancer hospItal</p>
          </div>
        </div>
        <div class="commonbox bednum">
          <i class="tag txtshadow">床号</i>
          <span class="number txtshadow">{{data.bed_no}}</span>
        </div>
        <div class="bottombox f-clear">
          <div class="commonbox diet">
            <p class="stitle">饮食方法</p>
            <p class="bigtitle">{{data.diet}}</p>
          </div>
          <div class="commonbox diet nursing">
            <p class="stitle"
               style="margin-top: 0.42rem">疼痛评估等级</p>
            <p class="bigtitle">{{painLevel}}</p>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="middletop f-clear">
          <div class="commonbox patient">
            <div class="infobox">
              <p class="infoname">{{data.pa_name}}</p>
              <p class="infoage txtshadow">{{data.sex_name}}
                <span v-show="data.pa_age1">{{data.pa_age1}}岁</span>
              </p>
              <patientstate :infodata="data.history_disease"
                            :babyinfo="data.isNewBaby"
                            :alertcont="data.history_disease_point"></patientstate>
            </div>
          </div>
          <div class="topright">
            <div class="commonbox txtshadow soscenter">
              <p>{{data.belong_dpname}}</p>
              <i class="ownimg"
                 v-show="data.arrears_fee<0"></i>
            </div>
            <div class="commonbox txtshadow level"
                 :class="[data.order_text_point==1?'level1':data.order_text_point==2?'level2':'level3']">
              <span v-show="data.order_text">{{data.order_text}}
                <sub>级</sub>
              </span>
            </div>
          </div>
        </div>
        <div style="height: 2.21rem; overflow:hidden;">
          <ul class="notelistother f-clear"
              v-if="!data.nursing_safety || data.nursing_safety.length==0"
              style="width: 7.2rem;overflow-x: scroll; white-space: nowrap;">
            <li class="commonbox">
              <p>1、注意预防感冒，避免受凉与疲劳，保持心情舒畅</p>
            </li>
            <li class="commonbox">
              <p>2、戒烟：吸烟会术后排痰不畅易继发肺部感染等并发症</p>
            </li>
            <li class="commonbox">
              <p>3、戒烟：吸烟会术后排痰不畅易继发肺部感染等并发症</p>
            </li>
            <li class="commonbox">
              <p>4、术前晚进食易消化饮食，如稀饭、面条12点后禁食水</p>
            </li>
            <li class="commonbox">
              <p>4、术前晚进食易消化饮食，如稀饭、面条12点后禁食水</p>
            </li>
          </ul>
          <div v-else>
            <careitem :caredata="data.nursing_safety"></careitem>
          </div>
        </div>
        <codeitem :codedata="codedata"
                  ref="tocode"></codeitem>
      </div>
      <div class="right-content">
        <div class="righttop f-clear">
          <div class="commonbox doctorbox">
            <div class="doctorinfo">
              <div class="infobar">
                <p class="tag txtshadow">责任医生</p>
                <p class="name txtshadow">{{data.doctor_name}}</p>
              </div>
              <div class="infobar">
                <p class="tag txtshadow">责任护士</p>
                <p class="name txtshadow">{{data.nurse_name}}</p>
              </div>
            </div>
          </div>
          <div class="commonbox appointment">
            <div class="appointinner">
              <h3 class="aptitle txtshadow">预约提醒</h3>
              <div class="remindscroll"
                   v-if="data.pa_id">
                <div class="remindnews"
                     v-for="(item,index) in reminddata"
                     :key="index"
                     @click="remindPopClick(item.dpName, item.itemName, item.sortDate, item.sortTime, item.itemTip)">
                  <!-- today -->
                  <div class="icontip">
                    <i class='tipclick'></i>
                    <!-- <p class="tipdesc" :style="{top:top+'px'}" ref="tipref" :class="{'tipshow': active===index}"><span v-show="item.itemTip===''">暂无</span>{{item.itemTip}}</p> -->
                  </div>
                  <h4 class="stitle">{{item.dpName}}</h4>
                  <p class="detailinfo">
                    <span>{{item.itemName}}</span>
                    <span>{{item.sortTime.substring(0,5)}}&nbsp;&nbsp;&nbsp;{{item.sortDate.substring(5,7)}}月{{item.sortDate.substring(8,10)}}日</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="commonbox hosnotice">
          <div class="innernotice">
            <h3 class="noticeh3 txtshadow">住院须知</h3>
            <div class="noticescroll">
              <el-scrollbar :native="false"
                            wrap-class="list"
                            style="height:100%;">
                <div class="scrollcont">
                  <p>1、为了您的病情尽早确诊、早日治疗，入院后要将您的病情如实告诉您的主管医师，尤其对过去与本次疾病有关的患病情况要说清楚，如有意隐瞒，会延误您的诊断和治疗，后果需要您自己承担。</p>
                  <p>2、住院治疗期间，病情尚未稳定和康复，请不要离院外出、外宿，如擅自离院外出期间发生不良后果如：</p>
                  <p class="secondtext">1、院外意外伤害；</p>
                  <p class="secondtext">2、病情加重、恶化、引发严重并发症、感染、出血等；</p>
                  <p class="secondtext">3、猝死；</p>
                  <p class="secondtext">4、其他严重的不可预知的意外情况；</p>
                  <p>3、住院期间请您积极配合医院的诊疗活动，认真履行各种签字手续。</p>
                  <p>4、每日上午8:30医生开始查房，望您不要离开病房。待手术患者，术前一天在麻醉医师对您访视之前请不要离开病房。</p>
                  <p>5、病人是否需要陪护，由医生根据病情决定，需要陪护的人员请自觉遵守医院有关规定。</p>
                  <p>6、住院期间病人的膳食由医生根据病情制定膳食医嘱，病人（家属／监护人）不能擅自更改，院外送进食物须符合医生的医嘱。</p>
                  <p>7、为了您和他人的安全，请不要在病房内使用电炉、电热杯、电饭锅及其他外接电源的电器。为保证医疗仪器的正常运转，请不要在有医疗仪器的病房内使用手机，以免干扰医疗仪器。不准使用汽油炉、酒精炉等，以免发生火灾。</p>
                  <p>8、住院病人除可携带生活必需品外，请不要将其他物品及贵重物品带入病房，请妥善保管好自己的钱、财、物，以防丢失或被盗。</p>
                  <p>9、请您爱护病房内的财产，若有损坏将会让您按价赔偿。</p>
                  <p>10、请保持病房内环境清洁整齐，不随地吐痰、乱扔杂物，请不要在病房内吸烟和洗晾衣物。请在病房内保持安静，不要大声喧哗，不串病房，以防交叉感染。</p>
                  <p>11、禁止由病房窗户向外抛垃圾、废物，如因抛物造成人员伤害或财物损失，对当事人根据造成损害的严重程度给予相应处罚。若造成他人重伤或者重大事故，当事人依法承担相应的法律责任。</p>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </div>
    <remindpop v-show="remindshowflag"
               v-on:parentCloce="parentCloceClick"></remindpop>
  </div>
</template>

<script>
import urls from '../../common.js'
import { mapState } from 'vuex'
import indexheader from '../../pages/common/indexheader.vue'
import careitem from './careitem.vue'
import codeitem from './codeitem.vue'
import patientstate from './patientstate.vue'
import remindpop from './remindPop.vue'
// import $ from 'jquery'
export default {
  name: 'firsthome',
  data () {
    return {
      data: [],
      reminddata: [],
      careflag: true,
      timer: null,
      codedata: '',
      remindflag: 0,
      active: '',
      top: 0,
      left: 0,
      delaytime: '',
      remindshowflag: false,
      intime: '',
      painLevel: '',
      payInfo: null
    }
  },
  components: {
    indexheader,
    careitem,
    codeitem,
    patientstate,
    remindpop
  },
  computed: {
    ...mapState({
      bedNo: 'bedNo'
    })
  },
  created () {
    this.homeInfo()
  },
  mounted () {
    window.timer = setInterval(() => { // 一分钟调一次接口
      this.homeInfo()
    }, 600000)

    document.addEventListener('click', e => {
      if (e.target.className !== 'tipclick' && e.target.className !== 'tipdesc tipshow') {
        this.active = ''
      }
    })
  },

  methods: {
    homeInfo () {
      var _this = this
      if (localStorage.getItem('WardBedNum')) {
        _this.$http.get(urls.homeInfo + '/' + localStorage.getItem('WardBedNum')).then(result => {
          if (result.body.code === '200') {
            _this.data = result.body.data
            _this.codedata = result.body.data.inpatientno
            _this.intime = result.body.data.in_time
            console.log(_this.data)
            this.$store.commit('belongDpname', result.body.data.belong_dpname)
            this.$store.commit('getIdCard', result.body.data.id_card)
            this.$store.commit('getPaId', result.body.data.pa_id)
            this.payInfo = {
              pa_id: result.body.data.pa_id,
              in_time: result.body.data.in_time,
              consumer: result.body.data.pa_name,
              phone: result.body.data.phone,
              case_number: result.body.data.case_number,
              bed_no: result.body.data.bed_no
            }
            this.$store.commit('getPayInfo', this.payInfo)
            _this.appointmentInfo()
            console.log(result.body.data.belong_dpname)
            this.levleInfo()
            if (this.$refs.tocode) { this.$refs.tocode.changecode(_this.codedata) }
          } else if (result.body.code === '500') {
            _this.data = result.body.data
          }
        })
      } else {
        _this.data = ''
      }
    },
    appointmentInfo () {
      // {'idCard': this.data.id_card} 632801194003101016
      const Qs = require('qs')
      var _this = this
      // json数据格式转formdata格式 或者另外一种方式{emulateJSON: true}
      this.$http.post(urls.queryAppointmentByCardNo, Qs.stringify({ 'cardNo': this.data.card_no }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          }
        }
      ).then(result => { // 预约提醒
        // console.log(result.body)
        if (result.body.code === '200') {
          //   console.log(result.body.data)
          _this.reminddata = result.body.data
          console.log(_this.reminddata)
        } else {
          _this.reminddata = null
        }
      })
    },
    // 预约提示弹出
    // remindtipClick (index, leftval, topval) {
    //   let that = this
    //   if (index === this.active && (this.active || this.active === 0)) {
    //     this.active = ''
    //     return false
    //   } else {
    //     clearTimeout(this.delaytime)
    //   }
    //   if (this.active === index) {
    //     this.active = ''
    //   } else {
    //     this.active = index
    //     this.delaytime = setTimeout(function () {
    //       that.active = ''
    //     }, 10000)
    //     // console.log(document.getElementsByClassName('tipdesc')[index].setAttribute('style', 'top:' + event.screenY + 'px'))
    //   }
    //   this.$nextTick(function () {
    //     this.top = event.clientY + 15
    //     this.left = event.clientX + 15
    //   })
    // },
    // 预约提醒弹出层
    remindPopClick (dpName, itemName, sortDate, sortTime, itemTip) {
      this.remindshowflag = true
      this.$router.push({
        query: { dpName: dpName, itemName: itemName, sortDate: sortDate, sortTime: sortTime, itemTip: itemTip }
      })
    },
    parentCloceClick () {
      this.remindshowflag = false
    },
    levleInfo () { // 获取疼痛等级
      this.$http.get(urls.getPainAssessmentLevel + '?paId=' + this.codedata + '&inTime=' + this.intime).then(result => {
        if (result.data.data.length > 0 && result.data.data[0].level) {
          this.painLevel = result.data.data[0].level
          this.$store.commit('getPainLevel', result.data.data[0].level)
        }
      })
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/') {
        this.homeInfo()
        window.timer = setInterval(() => { // 路由回到首页继续十分钟调一次接口
          this.homeInfo()
        }, 600000)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
// @import url("//unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css");
@import '../../assets/css/indexcommon.css';
@import '../../assets/css/variables.styl';

.m-content {
  display: block;
  padding: 0.2rem 0.3rem 0 0.3rem;
  text-align: center;

  .topcont {
    text-align: left;

    .logobox {
      display: inline-block;
      text-align: left;

      .logoimg {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        margin-right: 0.2rem;
        float: left;
      }

      .title {
        font-size: 0.38rem;
        display: inline-block;
        color: #27ae9e;
        font-weight: bold;
        line-height: 0.75rem;
      }
    }

    .toptime {
      display: inline-block;
      float: right;
      font-size: 0.32rem;
      line-height: 0.75rem;

      span {
        display: inline-block;
        margin-left: 0.2rem;
      }
    }
  }

  .innercontent {
    margin: 0.1rem 0 0 0;

    .left-content {
      width: 3.8rem;
      margin-right: 0.2rem;
      float: left;

      .commonbox {
        border-radius: 0.2rem;
        overflow: hidden;
        margin-bottom: 0.1rem;
      }

      .hosname {
        width: 3.8rem;
        height: 4.04rem;
        background-image: url('../../../static/images/indexone/HospitalName.png');
        box-shadow: 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07);

        .hoslogo {
          width: 1.7rem;
          height: 1.7rem;
          border-radius: 50%;
          overflow: hidden;
          margin: 0.42rem auto 0.3rem auto;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .namebox {
          margin-bottom: 0.2rem;

          .cname {
            font-size: 0.36rem;
            color: #fff;
            margin-bottom: 0.08rem;
          }

          .ename {
            font-size: 0.16rem;
            color: #fff;
            font-family: 'Arial';
          }
        }
      }

      .bednum {
        width: 3.8rem;
        height: 2.2rem;
        background-image: url('../../../static/images/indexone/BedNum.png');
        box-shadow: 0px 10px 38.54px 2.46px rgba(25, 142, 190, 0.29);
        position: relative;

        .tag {
          display: inline-block;
          font-size: 0.36rem;
          color: #fff;
          position: absolute;
          left: 0.22rem;
          top: 0.32rem;
        }

        .number {
          font-size: 0.72rem;
          color: #fff;
          line-height: 2.2rem;
          text-align: center;
        }
      }

      .bottombox {
        width: 3.8rem;

        .diet {
          float: left;
          width: 1.8rem;
          height: 2.81rem;
          background-image: url('../../../static/images/indexone/Diet.png');
          position: relative;

          .stitle {
            font-size: 0.28rem;
            color: #fff;
            width: 0.28rem;
            line-height: 0.34rem;
            margin: 0.72rem 0.2rem 0 0.4rem;
            float: left;
          }

          .bigtitle {
            font-size: 0.48rem;
            width: 0.48rem;
            color: #fff;
            line-height: 0.55rem;
            display: table-cell;
            vertical-align: middle;
            height: 2.81rem;
          }
        }

        .nursing {
          float: right;
          background-image: url('../../../static/images/indexone/NursingLv.png');

          .bigtitle {
            font-size: 0.32rem;
            line-height: 0.33rem;
          }
        }
      }
    }

    .middle-content {
      display: block;
      width: 7.2rem;
      float: left;
      margin-right: 0.2rem;

      .middletop {
        margin-bottom: 0.1rem;

        .patient {
          width: 3.8rem;
          height: 4.64rem;
          background-image: url('../../../static/images/indexone/PatientName.png');
          box-shadow: 0px 10px 43.24px 2.76px rgba(121, 122, 231, 0.3);
          float: left;

          .infobox {
            width: 3.8rem;
            height: 4.64rem;
            vertical-align: middle;
            display: table-cell;
            text-align: center;

            .infoname {
              font-size: 0.6rem;
              color: #fff;
              margin-bottom: 0.4rem;
            }

            .infoage {
              font-size: 0.36rem;
              color: #fff;
            }
          }
        }

        .topright {
          width: 3.18rem;
          float: right;

          .soscenter {
            width: 3.18rem;
            height: 2.2rem;
            background-image: url('../../../static/images/indexone/sos.png');
            box-shadow: 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07);
            margin-bottom: 0.2rem;
            position: relative;

            p {
              font-size: 0.34rem;
              color: #fff;
              text-align: left;
              padding: 0.37rem 0 0 0.3rem;
            }

            .ownimg {
              display: inline-block;
              width: 0.34rem;
              height: 0.34rem;
              background-image: url('../../../static/images/indexone/oweicon.png');
              background-size: 100% 100%;
              position: absolute;
              top: 0.97rem;
              left: 1.4rem;
              // margin-top: -0.17rem;
            }
          }

          .level {
            width: 3.18rem;
            height: 2.23rem;
            font-size: 0.9rem;
            line-height: 2.23rem;
            color: #f5f5f5;
            // background-image: url('../../../static/images/indexone/Level.png');
            box-shadow: 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07);

            sub {
              font-size: 0.4rem;
              margin-left: 0.1rem;
              vertical-align: 0.1rem;
            }
          }

          .level1 {
            background-image: url('../../../static/images/indexone/Level.png');
          }

          .level2 {
            background-image: url('../../../static/images/indexone/Level1.png');
          }

          .level3 {
            background-image: url('../../../static/images/indexone/Level2.png');
          }
        }
      }

      .notelistother {
        position: relative;
        z-index: 99;
        padding-bottom: 0.09rem;
        text-align: left;

        li {
          width: 1.65rem;
          height: 2.11rem;
          background-size: 100% 100%;
          background-image: url('../../../static/images/indexone/Note.png');
          text-align: left;
          box-sizing: border-box;
          padding: 0.3rem 0.15rem;
          display: inline-block;
          margin-right: 0.11rem;
          position: relative;

          &:last-child {
            margin-right: 0;
          }

          span {
            font-size: 0.24rem;
            color: #e3f1ef;
            display: block;
            position: absolute;
            // top: 0.3rem;
            // left: 0.18rem;
            margin: 0.3rem 0 0 0.18rem;
          }

          p {
            font-size: 0.24rem;
            color: #e3f1ef;
            line-height: 0.3rem;
            white-space: normal;
          }
        }
      }

      .codebox {
        li {
          width: 2.27rem;
          height: 2.3rem;
          background: #37c0b0;
          border-radius: 0.2rem;
          margin-right: 0.19rem;
          box-shadow: 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07);
          float: left;

          &:last-child {
            margin-right: 0;
          }

          .codename {
            font-size: 0.3rem;
            color: #fff;
            padding: 0.38rem 0 0.2rem;
          }

          .codeimg {
            width: 1.2rem;
            height: 1.2rem;
            display: block;
            margin: 0 auto;
          }
        }
      }
    }

    .right-content {
      width: 7.16rem;
      float: left;

      .righttop {
        margin-bottom: 0.1rem;

        .doctorbox {
          width: 3.18rem;
          height: 4.63rem;
          background-image: url('../../../static/images/indexone/DoctorName.png');
          box-shadow: 0px 10px 38.54px 2.46px rgba(25, 142, 190, 0.29);
          float: left;

          .doctorinfo {
            width: 3.18rem;
            height: 4.63rem;
            display: table-cell;
            vertical-align: middle;

            .infobar {
              margin-bottom: 0.55rem;

              &:last-child {
                margin-bottom: 0;
              }

              .tag {
                font-size: 0.36rem;
                color: #fff;
                margin-bottom: 0.2rem;
              }

              .name {
                font-size: 0.48rem;
                color: #fff;
              }
            }
          }
        }

        .appointment {
          width: 3.78rem;
          height: 4.63rem;
          float: right;
          background: #49cfbf;
          box-shadow: 0px 10px 38.54px 2.46px rgba(0, 0, 0, 0.07);

          .appointinner {
            padding: 0.25rem 0;

            .aptitle {
              font-size: 0.36rem;
              color: #fff;
              text-align: left;
              margin-bottom: 0.18rem;
              padding: 0 0.3rem;
            }

            .remindscroll {
              height: 3.64rem;
              padding: 0 0.2rem;
              margin: 0 0.1rem;
              overflow-y: scroll;
            }

            .remindnews {
              background: #fff;
              border-radius: 0.1rem;
              box-shadow: 0px 0.08rem 0.1rem 0px rgba(36, 157, 143, 0.22);
              padding: 0.2rem 0.1rem 0.2rem 0.2rem;
              margin-bottom: 0.14rem;

              // position: relative;
              &:last-child {
                margin-bottom: 0;
              }

              .icontip {
                // position: absolute;
                width: 0.22rem;
                height: 0.22rem;
                right: 0.1rem;
                float: right;

                i {
                  display: inline-block;
                  // position: absolute;
                  right: 0;
                  width: 0.22rem;
                  height: 0.22rem;
                  background: url('../../../static/images/tipicon.png') no-repeat;
                  background-size: 100% 100%;
                }

                .tipdesc {
                  width: 2.8rem;
                  min-height: 0.6rem;
                  font-size: 0.2rem;
                  color: #fff;
                  text-align: left;
                  line-height: 1.2;
                  padding: 0.05rem 0.1rem;
                  box-sizing: border-box;
                  background: rgba(0, 0, 0, 0.6);
                  border-radius: 2px;
                  position: absolute;
                  word-break: break-all;
                  // right: 80px;
                  z-index: 10;
                  display: none;
                }

                .tipdesc.tipshow {
                  display: block;
                }
              }

              .stitle {
                font-size: 0.28rem;
                text-align: left;
                color: #1c1c1c;
                margin-bottom: 0.2rem;
              }

              .detailinfo {
                font-size: 0.24rem;
                text-align: left;
                color: #1c1c1c;

                span + span {
                  margin-left: 0.1rem;
                  font-size: 0.2rem;
                }
              }
            }

            .today {
              &:before {
                content: '';
                width: 0.12rem;
                height: 0.12rem;
                border-radius: 50%;
                background: #fc930a;
                position: absolute;
                left: 0.1rem;
                top: 0.32rem;
              }
            }
          }
        }
      }

      .hosnotice {
        width: 7.16rem;
        height: 4.53rem;
        text-align: left;
        background: #37c0b0;

        .innernotice {
          padding: 0.35rem 0.1rem 0.35rem 0.3rem;

          .noticeh3 {
            font-size: 0.36rem;
            color: #fff;
            margin-bottom: 0.4rem;
          }

          .noticescroll {
            height: 3.2rem;

            .scrollcont {
              padding-right: 0.1rem;

              p {
                font-size: 0.24rem;
                margin-bottom: 0.25rem;
                text-indent: 0.15rem;
                line-height: 0.28rem;
                color: #e3f1ef;
              }

              .secondtext {
                text-indent: 0.35rem;
              }
            }
          }
        }
      }
    }
  }
}

.notelist li {
  width: 1.46rem;
  height: 2rem;
  background-size: 100% 100%;
  background-size: 100% 100%;
  background-image: url('../../../static/images/indexone/Note.png');
  text-align: left;
  box-sizing: border-box;
  padding: 0.52rem 0.1rem;
  display: inline-block;
  margin-right: 0.3rem;
  position: relative;
}

.notelist li span {
  font-size: 0.24rem;
  color: #e3f1ef;
  display: block;
  position: absolute;
  margin: 0.3rem 0 0 0.18rem;
}

.notelist li:nth-child(4n) {
  margin-right: 0;
}

.notelist li p {
  font-size: 0.24rem;
  color: #e3f1ef;
  text-align: center;
  line-height: 0.6rem;
}
</style>
